// 创建一个路由器，并暴露出去

// 命名路由
/*
作用：可以简化路由跳转及传参

跳转路由
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>

<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>
*/

// 第一步：引入createRouter
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/pages/home.vue'
import News from '@/pages/news.vue'
import About from '@/pages/about.vue'

// 第二步：创建路由器
const router = createRouter({
    history: createWebHistory(), //路由器的工作模式
    routes: [
        { name: 'zhuye', path: '/home', component: Home },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name: 'xiang',
                    path: 'detail',
                    component: () => import('@/pages/detail.vue'),
                    // 第一种写法：将路由收到的所有params参数作为props传给路由组件
                    // props:true,
                    // 第二种写法：函数写法，可以自己决定将什么作为props给路由组件
                    props(route) {
                        return route.query
                    }

                    // 第三种写法：对象写法，可以自己决定将什么作为props给路由组件
                    /* props:{
                      a:100,
                      b:200,
                      c:300
                    } */
                }
            ]
        },
        { name: 'guanyu', path: '/about', component: About },
    ]
})
// 暴露出去router
export default router